<template>
  <!-- 主要内容 -->
  <div class="container my-5">
    <h1 class="text-center" @click="MessageBox.alert('aaa','bbb')">欢迎来到我的博客</h1>
    <p class="lead text-center" @click="MessageBox.confirm('ccc','ddd',()=>{console.log('eee')})">这里是我的博客，分享我的技术和生活</p>

    <!-- 第一个表格：Todo 数据 -->
    <h2 class="mt-5">Todo 数据</h2>
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">标题</th>
          <th scope="col">完成状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="todo in todos" :key="todo.id">
          <td>{{ todo.id }}</td>
          <td>{{ todo.title }}</td>
          <td>
            <input type="checkbox" :checked="todo.completed" disabled>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 第二个表格：User 数据 -->
    <h2 class="mt-5">User 数据</h2>
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">ID</th>
          <th scope="col">用户名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MessageBox } from '../../utils/MessageBox';

// 模拟 todo 数据
const todos = ref([
  { id: 1, title: '学习 Vue 3', completed: false },
  { id: 2, title: '完成项目作业', completed: true },
  { id: 3, title: '阅读技术书籍', completed: false },
  { id: 4, title: '参加技术讲座', completed: false },
  { id: 5, title: '练习代码', completed: true }
]);

// 模拟 user 数据
const users = ref([
  { id: 1, username: 'user1' },
  { id: 2, username: 'user2' },
  { id: 3, username: 'user3' },
  { id: 4, username: 'user4' },
  { id: 5, username: 'user5' }
]);
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>